<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>我的购买</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
    <style>
        body {
            /*background-color: #D7D6D5;*/
            background-color: #fff;
        }

        .test {
            position: relative;
        }

        .lists {
            padding: 8px 15px 15px 15px;
            background-color: #fff;
            border-bottom: 2px solid #D7D6D5;
        }

        .img_picture {
            width: 100%;
            height: 80px;
            display: inline-block;
            border-radius: 5px;
        }
        .img_picture1{
          width: 100%;
          height: 80px;
          z-index: 2;
          position: absolute;
          display: inline-block;
          vertical-align: middle;
          border-radius: 5px;
        }
        .content1 {
            width: 52%;
            float: left;
            height: 80px;
            padding-left:12px;
        }

        .content_wenzi {
            font-size: 14px;
            padding-top: 5px;
            color: #A7A7A7;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .shuoming {
            font-size: 14px;
            position: absolute;
            bottom: 0px;
            color: #A7A7A7;
        }

        .money {
            font-size: 14px;
            position: absolute;
            bottom: 0px;
            right: 0px;
            color: #A7A7A7;
        }

        .right {
            right: 0px;
        }

        .daoqi {
            color: #fff;
            background-color: #C3C3C3;
            height: 30px;
            line-height: 30px;
            width: 100%;
            font-size: 13px;
            text-align: center;
            position: absolute;
            margin-top: 30px;
            left:0;
        }

        .test1 {
            position: relative;
        }

        .cat {
            width: 208px;
            height: 200px;
            position: absolute;
            left:50%;
            top:50%;
            margin-left: -104px;
            margin-top:-100px;
            text-align: center;
        }


        .zi {
            margin-top: 18px;
            color: #dedede;
        }

        .radio {
            margin-top: 6px;
            color: #ea5714;
            font-size: 15px;
        }
        .content_title {
            color: #000;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 18px;
        }

        .outcat{
          width: 166px;
          height: auto;
          display: block;
          margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="vm" v-cloak>
        <!-- <div style="height:8px;background-color:#C3C3C3;width:100%;margin:10px 0px;">

        </div> -->
        <div class="login" v-if="isloginflag">
            <div class="tablist" v-if="iskong">
              <div class="cat">
                  <img src="../image/qq.jpg" alt="" class="outcat">
                  <div class="zi">
                      目前没有购买的视频
                  </div>
              </div>

            </div>
            <div class="tablist" v-else>
              <div class="lists" v-for="item in buyvideolist" @click="Openjieshao(item)" >
                  <div style="float:left;width: 40%;position:relative" >
                        <span class="videotype" :class="{videotypedaka:item.video_type==3,videotypemianfei:item.video_type==1}">{{videotype(item.video_type)}}</span>
                        <img  v-if="yidaoqi(item.endtime2)" src="../image/daoqi.png" alt="" class="img_picture1">
                        <img v-if="item.status!==1||item.isonline==2||item.isdelete==1" src="../image/xiajia.png" alt="" class="img_picture1">
                        <img v-bind:src="item.img" class="img_picture" alt="">
                  </div>
                  <div class="content1 test">
                      <p class="content_title">{{item.video_name}}</p>
                      <p class="content_wenzi">观赏时限：{{riqi(item.endtime,item.is_forever)}}</p>
                      <div class="shuoming">{{buydate(item.adddate)}}</div>
                      <div class="money" v-if="item.pay_type==1 && item.cash">金额{{item.cash}}元</div>
                      <div class="money" v-if="item.pay_type==2 && item.score">{{item.score}}学分</div>
                  </div>
                  <!-- <div class="daoqi" v-if="item.status!==1||item.isonline==2||item.isdelete==1">视频已下架</div>
                  <div v-else>
                    <div class="daoqi" v-if="yidaoqi(item.endtime2)">视频已到期</div>
                  </div> -->
                  <!-- <div class="daoqi" v-if="">视频已下架</div> -->

                  <div class="aui-clearfix"></div>
              </div>
            </div>
        </div>
        <div class="login" v-else>
            <div class="big-box">
                <div class="cat" onclick="login()">
                    <img src="../image/qq.jpg" alt="" class="outcat">
                    <div class="zi">
                        登录后可同步账号购买信息
                    </div>
                    <div class="radio">
                        立即登录
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/rest.js"></script>
<script type="text/javascript" src="../script/vue.2.5.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/showdate.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/faskclick.js"></script>
<script type="text/javascript">
var uid=$api.getStorage('uid');
    var vm = new Vue({
        el: '#vm',
        data: {
            buyvideolist: [],
            iskong: false,
            isloginflag: false,
            page: 1,
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }

            }
        },
        methods: {
            init: function() {
                var _this = this;
                var uid = $api.getStorage('uid');
                api.addEventListener({
                    name: 'loginsuccess'
                }, function(ret, err){
                  _this.init()
                });
                api.addEventListener({
                    name: 'scrolltobottom',
                    extra: {
                        threshold: 80 //设置距离底部多少距离时触发，默认值为0，数字类型
                    }
                }, function(ret, err) {
                    if (_this.iskong) {
                        _this.page = _this.page
                    } else {
                        _this.page = _this.page + 1;
                        _this.getmyvideo();
                    }
                });
                _this.getmyvideo()

                if(uid){
                  _this.isloginflag = true;
                  // 获取购买列表
                }else {
                  _this.isloginflag = false;
                }
            },
            yidaoqi(daoqitime){
                if (Date.parse(new Date())/1000>daoqitime) {
                  return true;
                }else {
                  return false
                }
            },
            videotype: function(res) {
                if (res == 2) {
                    return 'VIP'
                } else if (res == 3) {
                    return '大咖'
                } else {
                    return '免费'
                }
            },

            Openjieshao: function(item) {
              if (item.status!==1||item.isonline==2||item.isdelete==1) {
                return false;
              }
              if (Date.parse(new Date())/1000>item.endtime2) {
                return false
              }
              var _this = this;
              if(uid){
                var data1={
                  video_id: item.id,
                  uid: uid
                }
              }else{
                var data1={
                  video_id: item.id,
                  uid: ''
                }
              }
              new rest().get('getDetail').datae(data1).success(function(res) {
                  console.log(JSON.stringify(res))
                  if (res.flag == 1) {
                      _this.videodetial = res.msg;
                    apicmmon.openwin('videodetail_win', 'VIP/videodeail.html', {
                          videoid: res.msg.id
                    })
                  }
                  else{
                    api.toast({
                        msg: res.msg,
                        duration: 2000,
                        location: 'middle'
                    });

                  }
              }).error(function(err) {
                  console.log(JSON.stringify(err))
              }).run()

            },
            riqi(videovalidate,isyongjiu){
              if(isyongjiu==1){
                return '永久'
              }else{
                return videovalidate.split(' ')[0]
              }
              // if(videovalidate.split(' ')[0].split('-')[0]==2090){
              //    return '永久'
              // }else{
              // }
            },
            buydate(goumairiqi){
              if(goumairiqi){
                return Mou.watchtime(goumairiqi)
              }
            },
            getmyvideo(){
              var _this = this;
              if(uid){
                new rest().get('getMyVideo').datae({
                    'uid': uid,
                    'page':_this.page
                }).success(function(res) {
                 console.log(JSON.stringify(res))
                      if (res.flag == 1) {
                          if (res.msg.length > 0) {
                              _this.iskong = false;
                              _this.buyvideolist =_this.buyvideolist.concat(res.msg);
                          } else {
                            if (_this.page == 1) {
                                _this.iskong = true;
                            } else {
                                _this.iskong = false;
                                _this.page = _this.page;
                                api.toast({
                                    msg: '没有更多了',
                                    duration: 2000,
                                    location: 'middle'
                                });
                            }
                          }
                      }
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()
              }

            }
        }
    })

    function login() {
        api.openFrame({
            name: 'login_introduction',
            url: './myself/login_introduction.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });

    }

</script>

</html>
